import React, { useState, useRef, useEffect } from 'react';
import axios from '../../http/axios'
import './VideoPlayer.scss';
import { useNavigate, useLocation } from 'react-router-dom';
import { LeftOutline } from 'antd-mobile-icons'

export default function VideoPlayer() {
  // 视频链接数组
  const [videoSrc, setVideoSrc] = useState([])
  // 是否正在滑动
  const [isMoving, setIsMoving] = useState(false)
  // 滑动开始时的坐标
  const [startY, setStartY] = useState(0)
  // 滑动开始时的translateY值
  const [startTranslateY, setStartTranslateY] = useState(0)
  // 视频容器的垂直位移
  const [translateY, setTranslateY] = useState(0)
  // 视频列表的索引
  const [videoIndex, setVideoIndex] = useState(0)

  const wrapRef = useRef(null);
  const nav = useNavigate()
  const location = useLocation()
  const { state } = location

  // 触屏开始
  const onTouchStart = (event) => {
    // 正在滑动
    setIsMoving(true);
    // 记录滑动开始时的坐标
    setStartY(event.touches[0].clientY);
    // 记录滑动开始时的translateY值
    setStartTranslateY(translateY);
  };
  // 触屏移动
  const onTouchMove = (event) => {
    // 查看是否在滑动
    if (!isMoving) return;
    // 计算当前触摸位置与触摸开始位置之间的垂直位移量
    const deltaY = event.touches[0].clientY - startY;
    // 更新视频容器的垂直偏移量，实现视频容器随着触摸手势上下移动
    setTranslateY(startTranslateY + deltaY);
  };
  // 触屏结束
  const onTouchEnd = () => {
    // 表示触屏结束
    setIsMoving(false)
    // 计算用户在触摸过程中的总位移量
    const deltaY = translateY - startTranslateY;
    // 计算用户在触摸过程中的总位移量的绝对值
    const deltaAbs = Math.abs(deltaY);
    // 获取用户在触摸过程中是向上滑动还是向下滑动
    const deltaSign = Math.sign(deltaY);
    // 判断用户触摸过程中的总位移量是否大于视频容器高度的三分之一
    // 或者是否大于50像素
    // 如果是，表示用户有明显的滑动动作，执行视频切换的操作
    if (deltaAbs > wrapRef.current.clientHeight / 3 || deltaAbs > 50) {
      // 调用获取新视频的函数
      getVideoUrl()
      // 根据用户滑动的方向获取新的视频索引
      const newIndex = Math.max(0, Math.min(videoIndex - deltaSign, videoSrc.length));
      // 根据用户滑动的方向设置视频容器的垂直偏移量，使视频容器在切换时有一个滑动效果
      setTranslateY(deltaSign * wrapRef.current.clientHeight)
      // 更新视频索引
      setVideoIndex(newIndex);
      // 设置计时器：在0.5秒后，将视频容器的垂直偏移量恢复为0，实现视频容器的平滑过渡效果
      setTimeout(() => {
        // 恢复原位
        setTranslateY(0);
      }, 500);
    } else {
      // 恢复原位
      setTranslateY(0);
    }
  };
  // 获取新视频
  let getVideoUrl = () => {
    // 连接代理服务器
    axios.get('/randomVideo').then(res => {
      // 将新的视频链接放入列表中
      setVideoSrc([...videoSrc, res.data.videoUrl])
    })
  }
  useEffect(() => {
    // 获取视频链接
    setVideoSrc([...videoSrc, state])
  }, [])


  return (
    <div className='vbody'>
      <div className='vtop'>
        <LeftOutline onClick={() => { nav(-1) }} />
      </div>
      <div
        className="video-wrap"
        ref={wrapRef}
        style={{ transform: `translateY(${translateY}px)` }}
        onTouchStart={onTouchStart}
        onTouchMove={onTouchMove}
        onTouchEnd={onTouchEnd}
      >

        <div>
          <video
          className='video'
            width="100%"
            preload="auto"
            controls
            muted
            autoPlay
            loop
            src={videoSrc[videoIndex]}
          >
            点击播放
          </video>
        </div>

      </div>
    </div>
  );
}
